<template>
    <div>
        <a-modal v-model:visible="selectRecipientVisible" title="选择接收对象" @ok="handleOk" :width=920 :forceRender="true">
            <div class="select-recipient-content" :key="selectRecipientKey">
                <div class="content-box-v">
                    <a-tree
                        v-if="treeData.length"
                        :multiple="false"
                        :autoExpandParent="true"
                        :defaultExpandAll="true"
                        v-model:checkedKeys="treeCheckedKeys"
                        :selectedKeys="selectedKeys"
                        :tree-data="treeData"
                        @select="treeSelect"
                    />
                </div>
                <div class="content-box-v margin-t" style="position: relative;">
                    <div style="display: flex;justify-content: space-between;align-items: center;position: absolute;top: 5px;">
                        <span style="font-weight: 600;">待选对象：</span>
                        <a-input
                        style="width: 100px;"
                        v-model="conditionData.realname" 
                        placeholder="请输入名称" />
                        <a-button 
                        class="blue-btn" 
                        type="primary" 
                        style="margin-left: 5px;" 
                        @click="retrievalClick(conditionData)"
                        
                        >搜索</a-button>
                    </div>
                    <div style="margin-top: 42px;">
                        <div v-for="(item,index) in preselectionArr" :key="item.id" >
                            <span class="select-cursor" style="font-weight: 500;" @click="addSelect(item,index)">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="select-btn-v margin-r" >
                    <a-button
                     class="blue-btn" 
                     style="margin-bottom: 20px;"
                     type="primary" 
                     size="small" 
                     @click="selectAllClick"
                    >{{ '全选->->' }}</a-button>
                    <a-button size="small" @click="deleteAllClick">{{ '<-<-全删' }}</a-button>
                </div>
                <div class="content-box-v">
                    <div>
                        <span style="font-weight: 600;">已选对象：</span>
                    </div>
                    <div > 
                        <div style="margin-top:10px">
                            <div v-for="(item,index) in selectedArr" :key="item.id" >
                                <span class="select-cursor" style="font-weight: 500;" @click="cancelSelect(item,index)">{{ item.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import { querySpcyDeptWithTree,queryUserWithOrgName } from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            selectRecipientKey:null,
            selectRecipientVisible:false,
            treeData:[],
            selectedKeys:[],
            treeCheckedKeys:[],
            conditionData:{
                realname:'',
                orgName:'',
                key:'',
            },
            selectedArr:[],
            selectedIdArr:[],
            preselectionArr:[],
            currentInterfaceData:[]
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val,data){
            this.selectedArr = val
            querySpcyDeptWithTree().then(res=>{
                if(res.code == 200){
                    this.treeData = res.result
                    this.selectedKeys = data.key?data.key:(res.result.length?[res.result[0].children[0].key]:[])
                    this.conditionData.orgName = data.orgName?data.orgName:(res.result.length?res.result[0].children[0].title:'')
                    // this.treeCheckedKeys = res.result.length?[res.result[0].key]:[]
                    this.conditionData.realname = data.realname
                    this.getOrgData({...this.conditionData,...data})
                    //console.log(this.selectedKeys)
                }else{
                    this.$message.warning(res.message)
                }
            })
            this.selectRecipientKey = Date.now()
        },
        getOrgData(val){
            queryUserWithOrgName(val).then(res=>{
                if(res.code == 200){
                    this.preselectionArr = []
                    //console.log(res)
                    this.currentInterfaceData = res.result
                    res.result.forEach((item,index) => {
                        let arr = this.selectedArr.filter(i=>i.id == item.id)
                        //console.log('==',arr)
                        if(!arr.length){
                            this.preselectionArr.push(item)
                        }
                    });
                    
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        selectAllClick(){//全选
            if(this.preselectionArr.length){
                this.preselectionArr.forEach((item,index)=>{
                    let arr = this.selectedArr.filter(i=>i.id == item.id)
                    if(!arr.length){
                        this.selectedArr.push(item)
                    }
                    if(this.preselectionArr.length-1 == index){
                        this.preselectionArr =[]
                    }
                })
            }

        },
        deleteAllClick(){//全删
            if(this.selectedArr.length){
                this.selectedArr.forEach((item,index)=>{
                    let arr = this.currentInterfaceData.filter(i=>i.id == item.id)
                    if(arr.length){
                        this.preselectionArr.push(item)
                    }
                    if(this.selectedArr.length-1 == index){
                        this.selectedArr =[]
                    }
                })
            }
        },
        treeSelect(val,item){//选择树
            //console.log(val,item)
            this.checkboxKey = []
            this.conditionData.key = ''
            if(val.length){
                this.selectedKeys = val
                this.conditionData.key = val[0]
            }
            
            this.conditionData.orgName = item.node.title
            this.getOrgData(this.conditionData)
        },
        addSelect(item,index){//选择待选对象
            this.preselectionArr.splice(index,1)
            this.selectedArr.push(item)
        },
        cancelSelect(item,index){
            let arr = this.currentInterfaceData.filter(i=>i.id == item.id)
            if(arr.length){
                this.preselectionArr.push(item)
            }
            
            this.selectedArr.splice(index,1)
        },
        handleOk(){
            //console.log(this.selectedArr)
            this.$emit('selectRecipientData',this.selectedArr,this.conditionData)
            this.selectRecipientVisible = false
        }
    }
}
</script>
<style lang="less">
.select-recipient-content{
    height: calc(100vh - 310px);
    width: 100%;
    display: flex;
    .content-box-v{
        padding: 5px;
        overflow-y: auto;
        border: 1px solid #d9d9d9;
        width: 30%;
    }
    .select-btn-v{
        width: 8%;
    }
    .margin-t{
        margin: 0 1%;
    }
    .margin-r{
        margin-right: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .blue-btn{
        border: 1px solid #5ca3e5 !important;
        background-color: #5ca3e5 !important;
        color: #fff !important;
    }
    .select-cursor:hover{
        cursor:default;
        background-color: #5ca3e5;
        color: #fff;
    }
}
</style>